<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>数据导入</span>
      </div>
    </template>

    <el-upload
        action=""
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleFileChange"
        accept=".txt"
        drag
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          支持.txt格式的飞行数据文件
        </div>
      </template>
    </el-upload>

    <el-divider />

    <div class="sample-data">
      <h4>数据格式示例：</h4>
      <pre>{{ sampleData }}</pre>
    </div>
  </el-card>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { parseFlightData } from '@/utils/dataParser'

const emit = defineEmits(['data-imported'])

const sampleData = `0.01000 stage=4 lon=118.314393 lat=25.037612 hei=8000.0 head=32.0 elev=-0.3 roll=0.0 vel=200.0
0.02000 stage=4 lon=118.314404 lat=25.037627 hei=8000.0 head=32.0 elev=-0.3 roll=0.0 vel=200.0
0.03000 stage=4 lon=118.314414 lat=25.037642 hei=8000.0 head=32.0 elev=-0.3 roll=0.0 vel=200.0`

// 处理文件上传
const handleFileChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    const content = e.target.result
    const parsedData = parseFlightData(content)
    emit('data-imported', parsedData)
  }
  reader.readAsText(file.raw)
}
</script>

<style scoped>
.sample-data {
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow: auto;
  color: black;
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
}
</style>